<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>ACE Web IDE</title>
        <link rel="stylesheet" type="text/css" href="./css/aceWebIDE_v1.03.css">
        <script src="./src/ace.js" type="text/javascript" charset="utf-8"></script>
        <script src="./src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
        <script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="container">
            <div id="toolBar">
                <label>语言:</label>
                <select id="selectLanguage">
                    <option value="javascript">JS</option>
                    <option value="php">PHP</option>
                    <option value="html">HTML</option>
                    <option value="java">Java</option>
                    <option value="python">Python</option>
                    <option value="c_cpp">C_cpp</option>
                    <option value="r">R</option>
                    <option value="ruby">Ruby</option>
                    <option value="sql">Sql</option>
                    <option value="sh">Sh</option>
                    <option value="text">Text</option>
                </select>
                <label>主题:</label>
                <select id="selectTheme">
                    <option value="monokai">monokai</option>
                    <option value="clouds">clouds</option>
                    <option value="terminal">terminal</option>
                    <option value="dreamweaver">dreamweaver</option>
                    <option value="github">github</option>
                    <option value="chrome">chrome</option>
                    <option value="twilight">twilight</option>
                    <option value="chaos">chaos</option>
                    <option value="ambiance">ambiance</option>
                    <option value="clouds_midnight">clouds_midnight</option>
                    <option value="cobalt">cobalt</option>
                    <option value="tomorrow">tomorrow</option>
                    <option value="tomorrow_night">tomorrow_night</option>
                    <option value="xcode">xcode</option>
                    <option value="sqlserver">sqlserver</option>
                </select>
                <label>字体大小:</label>
                <select id="selectFTsize">
                    <option value="13">13px</option>
                    <option value="14">14px</option>
                    <option value="15">15px</option>
                    <option value="16">16px</option>
                    <option value="17">17px</option>
                    <option value="18" selected>18px</option>
                    <option value="19">19px</option>
                    <option value="20">20px</option>
                    <option value="21">21px</option>
                    <option value="22">22px</option>
                    <option value="23">23px</option>
                    <option value="24">24px</option>
                    <option value="32">32px</option>
                    <option value="48">48px</option>
                    <option value="60">60px</option>
                    <option value="72">72px</option>
                </select>
                <button id="run">Run</button>
            </div>
            <div id="FileView"></div>
            <div id="codeEditor"></div>
            <div id="testView"></div>
            <div id="ResizeBtn"></div>
            <div id="ResizeFileBtn"></div>
            <div id="MarkDownView"><div id="HideViewBtn"><</div></div>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
    function rendEditor(language="javascript",theme="monokai",ftsize=18){
        ftsize = Number(ftsize);
        editor = ace.edit("editor");//初始化对象
        editor.setTheme("ace/theme/" + theme);//主题
        editor.session.setMode("ace/mode/" + language);//语言类型
        editor.setFontSize(ftsize);//字体大小
        editor.setReadOnly(false); //设置只读（true时只读，用于展示代码）
        editor.setOption("wrap", "free");//自动换行,设置为off关闭
        //代码提示
        ace.require("ace/ext/language_tools");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        // var code = editor.getValue();//获取代码
        // console.log(code);
    }
    $(function(){
        // 初始化样式
        var oTestView = document.getElementById('testView');
        var oFileView = document.getElementById('FileView');
        var codeEditor = document.getElementById('codeEditor');
        var containerPadding = 30;
        var WindowWidth = window.innerWidth - containerPadding;
        var toolBar = document.getElementById('toolBar');
        oTestView.style.height = window.innerHeight - 90 + "px";
        oFileView.style.height = oTestView.style.height;
        codeEditor.style.height = oTestView.style.height;
        $("#ResizeBtn").hide();
        $("#MarkDownView").css({
            'left':codeEditor.offsetWidth - 70 + oFileView.offsetWidth + 'px',
            'top':Math.floor((codeEditor.offsetHeight - 40)/2) + 'px'
        });
        $("#ResizeBtn").css({
            'left':codeEditor.offsetWidth + oFileView.offsetWidth + 13 +"px",
            'height':codeEditor.offsetHeight + 'px'
        });
        $("#ResizeFileBtn").css({
            'left':oFileView.offsetWidth + 15 + "px",
            'height':codeEditor.offsetHeight + 'px'
        });

        //初始化代码、编辑器
        var initCode = "console.log('version = 1.03');";
        var html = '<div id="editor"><textarea>'+initCode+'</textarea></div>';
        codeEditor.innerHTML = html;
        rendEditor($("#selectLanguage").val(),$("#selectTheme").val(),$("#selectFTsize").val());
       



        //切换语法
        $("#selectLanguage").on('change',function(){
            rendEditor($("#selectLanguage").val(),$("#selectTheme").val(),$("#selectFTsize").val());
        });
        //切换主题
        $("#selectTheme").on('change',function(){
            rendEditor($("#selectLanguage").val(),$("#selectTheme").val(),$("#selectFTsize").val());
        });
        //切换字体大小
        $("#selectFTsize").on('change',function(){
            rendEditor($("#selectLanguage").val(),$("#selectTheme").val(),$("#selectFTsize").val());
        });

        //运行JS
        $("#run").on("click", function(){
            if($("#selectLanguage").val() == "javascript"){
                if(Toggle%2 == 0){
                    $("#HideViewBtn").click();
                }
                var code = editor.getValue();//获取代码
                eval(code);//运行代码
            }else{
                alert('暂时仅支持运行JS');
            }
        });

        window.onresize = function (){
            WindowWidth = window.innerWidth - containerPadding;
            oTestView.style.height = window.innerHeight - 90 + "px";
            codeEditor.style.height = oTestView.style.height;
            oFileView.style.height = oTestView.style.height;
            if(oTestView.offsetWidth != 0 && oFileView.offsetWidth != 0){
                codeEditor.style.width = Math.floor(0.6 * toolBar.offsetWidth) + 'px';
                oTestView.style.width = Math.floor(0.2 * toolBar.offsetWidth) +'px';
                oFileView.style.width = Math.floor(0.2 * toolBar.offsetWidth) +'px';
            }
            if(oFileView.offsetWidth != 0 && oTestView.offsetWidth == 0){
                codeEditor.style.width = Math.floor(0.8 * toolBar.offsetWidth) + 'px';
                oFileView.style.width = Math.floor(0.2 * toolBar.offsetWidth) +'px';
            }
            $("#ResizeBtn").css({
                'left':codeEditor.offsetWidth + 13 + oFileView.offsetWidth + "px",
                'height':codeEditor.offsetHeight + 'px'
            });
            $("#ResizeFileBtn").css({
                'left':oFileView.offsetWidth + 15 + "px",
                'height':codeEditor.offsetHeight + 'px'
            });
            $("#MarkDownView").css({
                'left':codeEditor.offsetWidth - 70 + oFileView.offsetWidth + 'px',
                'top':Math.floor((codeEditor.offsetHeight - 40)/2) + 'px'
            });
        }

        // resize视图、编辑器
        var oResizeTestViewBtn = document.getElementById('ResizeBtn');
        var disX=0;
        oResizeTestViewBtn.onmousedown=function(ev){
            $("#MarkDownView").hide();
            var oEvent=ev||event;
            disX=oEvent.clientX-oResizeTestViewBtn.offsetLeft;//鼠标和div左上角的距离
            document.onmousemove=function(ev){
                var oEvent=ev||event;
                var lt=oEvent.clientX-disX;//鼠标坐标减去距离得到div的位置坐标
                if(lt<500 + oFileView.offsetWidth){
                    lt=500 + oFileView.offsetWidth;   
                }
                else if(lt>document.documentElement.clientWidth-oResizeTestViewBtn.offsetWidth-150){
                    lt=document.documentElement.clientWidth-oResizeTestViewBtn.offsetWidth-150;
                }
                codeEditor.style.width = lt - 13 - oFileView.offsetWidth +'px';
                $('#testView').css({'width': WindowWidth - lt + 13 + 'px'});
                
                oResizeTestViewBtn.style.left=lt+'px';
            }
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
                $("#MarkDownView").show();
                $("#MarkDownView").css({
                    'left':codeEditor.offsetWidth - 70 + oFileView.offsetWidth + 'px',
                    'top':Math.floor((codeEditor.offsetHeight - 40)/2) + 'px'
                });
                rendEditor($("#selectLanguage").val(),$("#selectTheme").val(),$("#selectFTsize").val());
            }
            return false;
        }
        // resize文件、编辑器
        var oResizeFileBtn = document.getElementById('ResizeFileBtn');
        var disX_F=0;
        oResizeFileBtn.onmousedown=function(ev){
            if(Toggle%2 != 0){
                $("#HideViewBtn").click();
            }
            var oEvent=ev||event;
            disX_F=oEvent.clientX-oResizeFileBtn.offsetLeft;//鼠标和div左上角的距离
            document.onmousemove=function(ev){
                var oEvent=ev||event;
                var lt=oEvent.clientX-disX_F;//鼠标坐标减去距离得到div的位置坐标
                if(lt<100){
                    lt=100;   
                }
                else if(lt>document.documentElement.clientWidth-oResizeFileBtn.offsetWidth-500- oTestView.offsetWidth){
                    lt=document.documentElement.clientWidth-oResizeFileBtn.offsetWidth-500- oTestView.offsetWidth;
                }
                oFileView.style.width = lt - 15 +'px';
                $('#codeEditor').css({'width': WindowWidth - (lt - 15) + 'px'});
                $("#ResizeBtn").css({'left':codeEditor.offsetWidth + lt +"px"});
                oResizeFileBtn.style.left=lt+'px';
            }
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
                $("#MarkDownView").css({
                    'left':codeEditor.offsetWidth - 70 + oFileView.offsetWidth + 'px',
                    'top':Math.floor((codeEditor.offsetHeight - 40)/2) + 'px'
                });
                rendEditor($("#selectLanguage").val(),$("#selectTheme").val(),$("#selectFTsize").val());
            }
            return false;
        }

        var Toggle = 0;
        //显示测试视图
        $("#HideViewBtn").on('click',function(){
            if(Toggle%2 == 0){
                $("#HideViewBtn").text('>');
                $("#ResizeBtn").show();
                codeEditor.style.width = Math.floor(0.6 * WindowWidth) + 'px';
                oTestView.style.width = Math.floor(0.3 * WindowWidth) + 'px';
                oFileView.style.width = Math.floor(0.1 * WindowWidth) + 'px';
                $("#MarkDownView").css({'left':codeEditor.offsetWidth - 70 + oFileView.offsetWidth + 'px'});
                $("#ResizeBtn").css({'left':codeEditor.offsetWidth + oFileView.offsetWidth + 13 +"px"});
                $("#ResizeFileBtn").css({'left':oFileView.offsetWidth + 15 + "px"});
            }else{
                $("#HideViewBtn").text('<');
                $("#ResizeBtn").hide();
                codeEditor.style.width = Math.floor(0.8 * toolBar.offsetWidth) + 'px';
                oTestView.style.width = 0;
                oFileView.style.width = Math.floor(0.2 * toolBar.offsetWidth) + 'px';
                $("#MarkDownView").css({'left':codeEditor.offsetWidth - 70 + oFileView.offsetWidth + 'px'});
                $("#ResizeBtn").css({'left':codeEditor.offsetWidth + oFileView.offsetWidth + 13 +"px"});
                $("#ResizeFileBtn").css({'left':oFileView.offsetWidth + 15 + "px"});
            }
            rendEditor($("#selectLanguage").val(),$("#selectTheme").val(),$("#selectFTsize").val());
            Toggle += 1;
        });
    });

    </script>
</html>